<template>
	<view class="content">
		<image src="/static/bg.png" mode="" class="box-bg"></image>
		<navBack />
		<view class="card">
			<view class="search-box">
				<u-search placeholder="搜索小区" v-model="keyword" height="74rpx" :actionStyle="actionStyle"
					bgColor="#ffffff" borderColor="#CCCCCC" @custom="searching"></u-search>
			</view>

			<view class="housing-estate-box appear" v-if="housingEstate.id">
				<view class="_title_">
					小区信息
				</view>
				<view class="lable">
					<view class="">
						行政区域
					</view>
					<view class="">
						{{housingEstate.regionName}}
					</view>
				</view>
				<view class="lable">
					<view class="">
						物业小区
					</view>
					<view class="">
						{{housingEstate.name}}
					</view>
				</view>
				<view class="lable">
					<view class="">
						小区地址
					</view>
					<view class="">
						{{housingEstate.address}}
					</view>
				</view>
			</view>
			<u-empty v-else marginTop="100rpx" text="请先搜索相关小区" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<view class="appear" v-if="housingEstate.id">
				<view class="form-item" @click="setPicker('buildingList','buildingData')">
					<view class="">
						选择楼栋
					</view>
					<view class="">
						{{buildingData.name || '请选择'}}
					</view>
				</view>
				<view class="form-item" @click="setPicker('floorsList','floorsData')"
					:class="{'form-item-disabled': floorsList.length===0}">
					<view class="">
						选择单元(可选)
					</view>
					<view class="">
						{{floorsData.name || '请选择'}}
					</view>
				</view>
				<view class="form-item" @click="setPicker('unitsList','unitsData')"
					:class="{'form-item-disabled': unitsList.length===0}">
					<view class="">
						选择楼层(可选)
					</view>
					<view class="">
						{{unitsData.name || '请选择'}}
					</view>
				</view>
				<view class="form-item" v-if="buildingData.id" @click="selectFamily">
					<view class="">
						选择分户
					</view>
					<view class="">
						{{familyData.name||'请选择'}}
					</view>
				</view>

			</view>
			<view class="submit-btn" :class="{'submit-btn-disabled':!familyData.id}" @click="submit">
				添加
			</view>

			<u-popup :show="housingEstateShow" @close="closeHousingEstateShow" round="14">
				<view class="popup-top">
					<view class="">

					</view>
					<view class="" :style="{color: housingEstate.id?'#333333':'#ccc'}">
						<block v-if="housingEstate.id">
							已选择：<text style="font-weight: 700;">{{housingEstate.name}}</text>
						</block>
						<block v-else>
							请选择
						</block>
					</view>
					<view class="" @click="closeHousingEstateShow">
						确定
					</view>
				</view>
				<scroll-view scroll-y="true" style="max-height: 800rpx;" @scrolltolower="upData">
					<view v-for="item in housingEstateList" class="housing-estate-item"
						:class="{'housing-estate-item-active':item.id==housingEstate.id}" @click="housingEstate=item">
						{{item.name}}
					</view>
				</scroll-view>
			</u-popup>


			<u-popup :show="pickerShow" @close="closePicker" round="14">
				<view class="popup-top">
					<view class="">

					</view>
					<view class="" :style="{color: pickerData.id?'#333333':'#ccc'}">
						<block v-if="pickerData.id">
							已选择：<text style="font-weight: 700;">{{pickerData.name}}</text>
						</block>
						<block v-else>
							请选择
						</block>
					</view>
					<view class="" @click="closePicker">
						确定
					</view>
				</view>
				<scroll-view scroll-y="true" style="max-height: 800rpx;"  @scrolltolower="getFamily(pickerName)">
					<view v-for="item in pickerList" class="housing-estate-item"
						:class="{'housing-estate-item-active':pickerData.id==item.id}" @click="setPickerData(item)">
						{{item.name}}
					</view>
				</scroll-view>
			</u-popup>

		</view>
		<Loading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actionStyle: {
					width: '180rpx',
					height: '74rpx',
					lineHeight: '74rpx',
					borderRadius: '74rpx',
					background: '#456FFD',
					color: '#ffffff',
					fontSize: '28rpx',
					fontWeight: '700'
				},
				keyword: '',
				housingEstateName: '',
				housingEstateList: [],
				pageIndex: 1,
				pageIndex_:1,
				housingEstate: {},
				housingEstateShow: false,
				pickerShow: false,
				pickerName: '',
				pickerData: {},
				pickerList: [],
				buildingList: [], //楼栋
				buildingData: {},
				floorsList: [], //单元
				floorsData: {},
				unitsList: [], //楼层
				unitsData: {},
				familyList: [],
				familyData: {}
			}
		},
		watch: {
			housingEstate() {
				this.$myRequest(`/api/communities/GetBuildings/${this.housingEstate.id}`).then(res => {	
					this.buildingList= [] //楼栋
					this.buildingData= {}
					this.floorsList= [] //单元
					this.floorsData= {}
					this.unitsList= [] //楼层
					this.unitsData= {}
					this.familyList= []
					this.familyData= {}
					this.buildingList = res.data
				})
			},
			//选择楼栋 清除单元 层
			buildingData(){
				this.floorsList = []
				this.unitsList = []
				this.floorsData = {}
				this.unitsData = {}
				this.familyList= []
				this.familyData= {}
				//单元
				if (this.buildingData.floors) {
					let floorsList = []
					this.buildingData.floors.split(',').forEach((item, index) => {
						floorsList.push({
							name: item,
							id: index
						})
					})
					this.floorsList = floorsList
				}
				//层
				if (this.buildingData.units) {
					let unitsList = []
					this.buildingData.units.split(',').forEach((item, index) => {
						unitsList.push({
							name: item,
							id: index
						})
					})
					this.unitsList = unitsList
				}
			}
		},
		methods: {
			searching() {
				if (!this.keyword) return uni.showToast({
					title: '请输入小区关键词',
					icon: "none"
				});
				this.pageIndex = 1
				this.housingEstateList = []
				this.housingEstateName = this.keyword
				this.upData()
				this.housingEstateShow = true
			},
			upData() {
				if (this.pageIndex === 0) return;
				let pageSize = 20
				let data = {
					name: this.housingEstateName,
					pageIndex: this.pageIndex,
					pageSize
				}
				this.$myRequest('/api/communities', data).then(res => {
					this.housingEstateList.push(...res.data)
					if (res.data.length === pageSize) {
						this.pageIndex += 1
					} else {
						this.pageIndex = 0
					}
				})
			},
			selectFamily(){
				this.familyList=[]
				this.getFamily('familyData')
			},
			getFamily(pickerName) {
				if (pickerName!=='familyData'||this.pageIndex_ === 0) return uni.showToast({
					title:'该楼栋无相关信息!',
					icon: "none"
				})
				let pageSize = 20
				let data = {
					pageIndex: this.pageIndex_,
					pageSize,
					unit: this.unitsData.name || '',
					floors: this.floorsData.name || ''
				}
				this.$myRequest(`/api/houses/GetHouses/${this.buildingData.id}`, data).then(res => {
					this.familyList.push(...res.data)
					if (res.data.length === pageSize) {
						this.pageIndex_ += 1
					} else {
						this.pageIndex_ = 0
					}
					this.setPicker('familyList', 'familyData')
				})
			},
			closeHousingEstateShow() {
				this.housingEstateShow = false
			},
			setPicker(name, pickerName) {
				this.pickerName = pickerName
				this.pickerData=this[pickerName]
				let title = '该楼栋无相关信息！'
				if (!this.buildingData.id) {
					title = '请先选择楼栋信息！'
				}
				if (this[name].length === 0) return uni.showToast({
					title,
					icon: "none"
				})
				this.pickerList = this[name]
				this.pickerShow = true
			},
			confirmPicker(e) {
				this.closePicker()
			},
			closePicker() {
				this.pageIndex_=1
				this.pickerShow = false
				this[this.pickerName] = this.pickerData
				this.pickerData = {}
				
			},
			submit() {
				this.$myRequest(`/api/houses/${this.familyData.id}`, {}, 'POST').then(res => {
					this.$refs.uToast.show({
						message: "添加成功",
						complete() {
							uni.reLaunch({
								url: '/pages/houseProperty/houseProperty'
							});
						}
					})

				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.housing-estate-box {
		box-shadow: 0 0 6rpx #ccc;
		border-radius: 12rpx;
		padding: 20rpx;
		margin: 40rpx 0 30rpx 0;
	}

	.popup-top {
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
		text-align: center;

		view:nth-child(2) {
			font-size: 28rpx;
			color: #ccc;
		}

		view:nth-child(1),
		view:nth-child(3) {
			width: 100rpx;
			color: #456FFE;
		}
	}

	.housing-estate-item {
		margin: 0 40rpx;
		// height: 86rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		font-weight: 700;
		transition: all .5s;
		border-radius: 8rpx;
		border: 2rpx solid #ffffff;
	}

	.housing-estate-item-active {
		// font-size: 36rpx;
		color: #456FFE;
		border: 2rpx solid #456FFE;
	}

	.appear {
		animation: appearAn .8s;
	}

	@keyframes appearAn {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.card {
		position: absolute;
		z-index: 2;
		top: 172rpx;
		left: 20rpx;
		right: 20rpx;
		padding: 36rpx 20rpx;
		min-height: calc(100vh - 244rpx);

		.title {
			font-size: 28rpx;
			color: #FF0000;
			font-weight: 700;
		}

		.search-box {}

		.form-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 27rpx 0;
			font-size: 28rpx;
			color: #333333;
			transition: all .6s;

			view:nth-child(2) {
				font-weight: 700;
			}
		}

		.form-item-disabled {
			opacity: .5;
		}

		.submit-btn {
			width: 326rpx;
			height: 82rpx;
			line-height: 82rpx;
			border-radius: 82rpx;
			background: #456FFE;
			font-size: 28rpx;
			color: #ffffff;
			margin: 0 auto;
			margin-top: 360rpx;
			text-align: center;
			filter: grayscale(0%);
			transition: all .6s;
		}

		.submit-btn-disabled {
			filter: grayscale(100%);
		}
	}
</style>